<template>
  <div class="bj-range-calendar-container">
    <a-range-picker
      v-bind="$attrs"
      v-on="$listeners"
      :placeholder="placeholder"
      :valueFormat="valueFormat"
      :format="format"
      :show-time="showTime"
      dropdownClassName="bj-custom-calendar-container"
      v-model="dateValue"
      ref="bj-range-calendar"
    >
      <template slot="dateRender" slot-scope="current">
        <div
          class="ant-calendar-date"
          :class="dateRender && checkCalendarDateClassName(current)"
        >
          {{ new Date(current).getDate() }}
        </div>
      </template>
      <a-icon slot="suffixIcon" type="calendar" />
    </a-range-picker>
  </div>
</template>

<script>
import props from "./props";
export default {
  name: "bj-range-calendar",
  mixins: [props],
  data() {
    return {
      dateValue: [],
      customDateCell: false,
    };
  },
  watch: {
    value: {
      handler(val) {
        this.dateValue = val;
      },
    },
    dateValue: {
      handler(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    checkCalendarDateClassName(date = new Date()) {
      let paramDate = new Date(date);
      //当前日期
      let today = {
        year: this.completionZero(new Date().getFullYear()),
        month: this.completionZero(new Date().getMonth() + 1),
        day: this.completionZero(new Date().getDate()),
      };
      //传入的日期
      let paramDateObj = {
        year: this.completionZero(paramDate.getFullYear()),
        month: this.completionZero(paramDate.getMonth() + 1),
        day: this.completionZero(paramDate.getDate()),
      };
      let todayFullDate = today.year + "-" + today.month + "-" + today.day;
      let fullDate =
        paramDateObj.year + "-" + paramDateObj.month + "-" + paramDateObj.day;
      if (todayFullDate == fullDate) {
        //当天
        return "today-cell";
      } else if (this.activeDate.includes(fullDate)) {
        return "active-cell";
      }
    },

    //补全0
    completionZero(num = 0) {
      return num < 10 ? "0" + num : num;
    },
  },
};
</script>

<style lang="less">
.bj-custom-calendar-container {
  td:not(.ant-calendar-last-month-cell):not(.ant-calendar-next-month-btn-day) {
    .active-cell {
      color: var(--primary-color);
      font-weight: bold;
    }
  }
  .ant-calendar-range {
    td.ant-calendar-in-range-cell {
      &::before {
        background: #eff1f6;
      }
      .ant-calendar-date {
        color: rgba(0, 0, 0, 0.65);
        font-weight: 400;
      }
    }
  }
  td.ant-calendar-selected-day {
    .ant-calendar-date {
      color: #fff !important;
      font-weight: 400 !important;
    }
  }
}
</style>
